Controlling the layout

Controlling the layout of the code

There are three main features which let you control the layout of the code.

Element layout in the Preferences submenu, which lets you define how you prefer blank lines and carriage returns to be inserted around each HTML element.
Indentation in the Preferences submenu, which lets you choose elements to indent the content of.
The Formatting submenu where you find functions for reformatting the document according to your layout and indentation preferences. With this menu you also insert special formatting tags, which define how a section of the document should be formatted. This is useful for example if your document contains some server side scripting code, which you would like to have a special layout.

Element layout

Using Element layout in the Preferences submenu of the HTML menu, you can specify the layout you want for each HTML element. Alpha then uses your settings when it inserts new tags in the document, and when it otherwise reformats the code. The possible options differ between element with and without a closing tag.

Elements without a closing tag

For elements without a closing tag you can specify if you always want a carriage return inserted before and/or after the tag. If you check both checkboxes in the dialog, Alpha will format the code like this:

some text before the tag
<TAG>
some text after the tag

Elements with a closing tag

For elements with a closing tag, you have four different options letting you specify if you want the tags to be on lines of their own and if you want blank lines before and after them.

With the first option Alpha will format the code like this:

some text before the tag <TAG>text between tags</TAG> some text after the tag

With the second option Alpha will format the code like this:

some text before the tag
<TAG>text between tags</TAG>
some text after the tag

With the third option Alpha will format the code like this:

some text before the tag

<TAG>text between tags</TAG>

some text after the tag

With the fourth option Alpha will format the code like this:

some text before the tag

<TAG>
text between tags
</TAG>

some text after the tag

Indentation

Alpha indents the HTML code to make easier to read. Using Indentation in the Preferences submenu, you can choose which elements whose content should be indented. By default the content of lists and tables is indented. The element which you can indent the content of are those with a closing tag, which you have specified the fourth layout above.

some text before the tag

<TAG>
text between tags
</TAG>

some text after the tag

Below is an example of how the code is indented. Whenever Alpha inserts new tags in the document or otherwise reformats the code, it recognizes your indentation preferences.

Formatting menu

Reformat Paragraph

If there is a selection the code is reformatted within the selection, otherwise it is reformatted in the paragraph of the current position. A paragraph is in this case defined to be everything between the nearest blank lines.

Reformat Document

The same kind of reformatting of the whole document.

The reformatting is basically done such that the document would look as if you have typed it from top to bottom without changing anything. The following is done:

Everything between SCRIPT, STYLE, and PRE tags as well as everything inside comments is left untouched.
The content of formatting tags (see below) in indented according to the tags, but is otherwise not changed.
Line breaks are never inserted inside attribute values. If there is an attribute ATTR="blah blah", then "blah blah" is never broken into two lines. This is in particular to prevent that the event handlers are broken into two lines.
Provided these constraints Alpha inserts line breaks and blank lines and indents the code according to your layout and indentation preferences, and otherwise tries to make the lines approximately equally long.

Unfortunately reformatting of the code is rather complex and therefore not lightning fast.

No Formatting

Insert formatting tags around the selected text indicating that the content between the tags should not be reformatted at all, but be left as it is. You can for example use this around server side scripting code, which Alpha has no special support for.

some text which should left untouched

C Style Formatting

Insert formatting tags around the selected text indicating that the content between the tags should be formatted like C code. This is the same way as both JavaScript code and CSS code is formatted.

<!-- #C-FORMATTING -->
if (a == 17) {
    return;
}
<!-- /#C-FORMATTING -->

You can define your own formatting tags. See the power user section.